<template>
  <div>
    <a-form-item class="mb-1" label="栅格间隔">
      <a-input-number
        style="width: 200px"
        v-model:value="dataC.options.gutter"
      ></a-input-number>
    </a-form-item>

    <a-form-item label="列设置">
      <draggable
        :list="data.columns"
        v-bind="{
          animation: 200,
          group: { name: 'options' },
          ghostClass: 'ghost',
          handle: '.drag-item',
        }"
        handle=".drag-item"
        itemKey="index"
      >
        <template #item="{ element, index }">
          <li class="mb-1" :key="index">
            <i
              class="drag-item"
              style="font-size: 16px; margin: 0 5px; cursor: move"
            >
              <a-button circle plain size="small">
                <template #icon><UnorderedListOutlined /></template>
              </a-button>
            </i>
            <a-input-number
              placeholder="列宽"
              style="width: 90px"
              :max="24"
              :min="0"
              v-model:value="element.span"
            ></a-input-number>
            <a-input-number
              placeholder="偏移"
              style="width: 90px"
              :max="24"
              :min="0"
              v-model:value="element.offset"
            ></a-input-number>
            <a-button
              @click="handleOptionsRemove(index)"
              circle
              size="small"
              plain
              style="margin-left: 5px"
            >
              <template #icon><MinusOutlined /></template>
            </a-button>
          </li>
        </template>
      </draggable>
      <div style="margin-left: 26px">
        <a-button @click="handleAddColumn">增加一列</a-button>
      </div>
    </a-form-item>
  </div>
</template>

<script>
  import Draggable from 'vuedraggable'
  import { MinusOutlined, UnorderedListOutlined } from '@ant-design/icons-vue'

  export default {
    components: {
      Draggable,
      MinusOutlined,
      UnorderedListOutlined,
    },
    props: {
      data: {
        type: Object,
        default: Object,
      },
    },
    data() {
      return {
        dataC: this.data,
        linktableData: [],
        fromtableFiledData: [],
        componentSettingVisible: false,

        widgetconfigKey: '',
        selectIndex: '',
        modalkey: '',
      }
    },

    methods: {
      handleAddColumn() {
        this.dataC.columns.push({
          span: '',
          list: [],
        })
      },
      handleOptionsRemove(index) {
        if (this.dataC.type === 'grid') {
          this.dataC.columns.splice(index, 1)
        } else {
          this.dataC.options.options.splice(index, 1)
        }
      },
    },
  }
</script>
